/*
graceWeex.css
link   : grace.hcoder.net
author : 5213606@qq.com 深海
verson : 2.0

版权声明 : 
GraceUI 的版权约束是不能转售或者将 GraceUI 直接发布到公开渠道！
侵权必究，请遵守版权约定！
*/

/* 内外间距 */
.grace-padding{padding:15px;}
.grace-margin{margin:15px;}
.grace-margin-top{margin-top:30px;}

/* 通用包裹 */
.grace-scroller{width:750px;}
.grace-body{width:720px;}

/* flex 横向 */
.grace-rows{flex-direction:row;}
/* flex 竖向 */
.grace-columns{flex-direction:column;}
/* flex 自动换行 */
.grace-wrap{flex-wrap:wrap;}
/* flex 横向不换行 */
.grace-nowrap{flex-wrap:nowrap;}
/* flex 横向两端对齐 */
.grace-space-between{justify-content:space-between;}
/* flex 横向居中 */
.grace-flex-center{justify-content:center;}
/* flex 垂直顶端对齐 */
.grace-flex-top{align-items: flex-start;}
/* flex 垂直居中对齐 */
.grace-flex-vcenter{align-items:center;}
/* flex 垂直底部对齐 */
.grace-flex-bottom{align-items:flex-end;}

/* 定位 */
.grace-ab-lt{position:absolute; left:0; top:0;}
.grace-ab-lb{position:absolute; left:0; bottom:0;}
.grace-ab-rt{position:absolute; right:0; top:0;}
.grace-ab-rb{position:absolute; right:0; bottom:0;}

/* 标题及更多 */
.grace-title{padding:16px 0; line-height:40px; flex-wrap:nowrap; font-size:30px; justify-content:space-between; font-weight:700;}
.grace-center-title-text{line-height:40px; margin:0 10px;}
.grace-title-small-text{color:#B2B2B2; font-size:26px; line-height:40px;}

/* 背景 */
.grace-bg-black{background-color:#0E151D; color:#FFFFFF;}
.grace-bg-white{background-color:#FFFFFF; color:#0E151D;}
.grace-bg-blue{background-color:#3688FF; color:#FFFFFF;}
.grace-bg-blue-sky{background-color:#61CBEF; color:#FFFFFF ;}
.grace-bg-gray{background-color:#A5A7B2; color:#FFFFFF;}
.grace-bg-red{background-color:#E76B61; color:#FFFFFF;}
.grace-bg-green{background-color:#9DD26D; color:#FFFFFF;}
.grace-bg-yellow{background-color:#FFCC00; color:#FFFFFF;}
.grace-bg-light-blue{background-color:#AFCFFF; color:#FFFFFF;}
.grace-bg-light-yellow{background-color:#ECD1A8; color:#FFFFFF;}

/*  文本  */
.grace-h1{font-size:80px; line-height:160px;}
.grace-h2{font-size:60px; line-height:120px;}
.grace-h3{font-size:45px; line-height:90px;}
.grace-h4{font-size:32px; line-height:64px;}
.grace-h5{font-size:30px; line-height:60px;}
.grace-h6{font-size:28px; line-height:56px;}
.grace-bold{font-weight:bold;}
.grace-text{font-size:30px;}
.grace-text-small{font-size:22px; line-height:40px;}
.grace-line-through{text-decoration:line-through;}
.grace-italic{font-style:italic;}
.grace-ellipsis{lines:1;}
.grace-text-center{text-align:center;}

/* 文字颜色 */
.grace-black{color:#0E151D;}
.grace-white{color:#FFFFFF;}
.grace-blue{color:#3688FF;}
.grace-light-blue{color:#AFCFFF;}
.grace-blue-sky{color:#61CBEF;}
.grace-gray{color:#A5A7B2;}
.grace-red{color:#E76B61;}
.grace-yellow{color:#FFCC00;}
.grace-light-yellow{color:#ECD1A8;}
.grace-green{color:#9DD26D;}
.grace-active{color:#3688FF;}

/* 圆角 */
.grace-border-radius{border-radius:100px;}
.grace-border-radius-small{border-radius:10px;}

/* 边框 */
.grace-border{border-width:1px; border-style:solid; border-color:#E9E9E9;}
.grace-border-l{border-left-width:1px; border-left-style:solid; border-left-color:#E9E9E9;}
.grace-border-r{border-right-width:1px; border-right-style:solid; border-right-color:#E9E9E9;}
.grace-border-t{border-top-width:1px; border-top-style:solid; border-top-color:#E9E9E9;}
.grace-border-b{border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E9E9E9;}

/* 渐变背景 */
.grace-gtbg-blue{background-image:linear-gradient(to top, #B100FF ,#00B3FF);}
.grace-gtbg-pink{background-image:linear-gradient(to top, #FF0066 ,#CA00FF);}
.grace-gtbg-green{background-image:linear-gradient(to top, #39B55A,#8DC63E);}
.grace-gtbg-purple{background-image:linear-gradient(to top, #F000EE,#6E00FF);}
.grace-gtbg-orange{background-image:linear-gradient(to top, #FFCD00,#FF9B00);}
.grace-gtbg-blue-sky{background-image: linear-gradient(to top, #00FFD5,#008CFF);}


/* 九宫格 */
.grace-grids{flex-wrap:wrap; flex-direction:row;}
.grace-grids-items{width:240px; padding:8px 0; align-items:center;}
.grace-grids-image{width:130px; height:130px; border-radius:6px;}
.grace-grids-text{line-height:60px; height:60px; text-align:center; font-size:28px; margin-top:5px;}


/* 底部 */
.grace-footer-item{width:150px;}
.grace-footer-item-icon-txt{text-align:center; font-size:40px; color:#A5A7B2; height:60px; line-height:60px;}
.grace-footer-item-txt{text-align:center; font-size:26px; color:#A5A7B2; line-height:38px; height:38px;}

/* 列表 */
.grace-list{padding-left:35px;}
.grace-ceil{padding:25px 0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E9E9E9; align-items:center; flex-direction:row; flex-wrap:nowrap;}
.grace-txt-list{font-size:32px; line-height:55px; flex:1;}
.grace-list-arrow{width:55px; height:55px; line-height:55px; text-align:right; font-size:40px; color:#E9E9E9;}
.grace-list-icons{width:80px; height:80px; line-height:80px; font-size:50px;}
.grace-list-face{width:80px; height:80px; border-radius:55px; margin-right:20px;}
.grace-list-content{flex:1; width:700px;}
.grace-list-desc{color:#999; font-size:24px;}

/* 图文卡片 */
.grace-img-card{width:355px; margin:10px;}
.grace-img-card-ptxt{position:absolute; bottom:0; left:0; right:0; height:60px; background-color:rgba(0,0,0,0.2); color:#FFFFFF; line-height:60px; font-size:28px; color:#FFFFFF; text-align:center;}
.grace-img-card-txt{line-height:50px; padding:8px 0; font-size:28px;}
.grace-img-card-more{flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.grace-img-card-price{width:170px; height:50px; line-height:50px; flex:1; color:#E76B61; font-size:36px;}
.grace-img-card-btn{width:100px; height:50px; text-align:center; font-size:28px; border-radius:6px; line-height:50px; background-color:#E76B61; color:#FFFFFF;}

/* 标签 */
.grace-tags{width:80px; height:50px; text-align:center; line-height:50px; font-size:22px; background-color:#3688FF; color:#FFFFFF;}
.grace-tags-large{width:100px;  height:70px; line-height:70px; font-size:30px;}
.grace-capsule{width:152px; height:56px; flex-direction:row; flex-wrap:nowrap; border-width:2px; border-style:solid; border-color:#3688FF;}
.grace-capsule-icon{width:66px; line-height:52px; height:52px; text-align:center; font-size:28px; background-color:#3688FF; color:#FFFFFF;}
.grace-capsule-text{width:300px; flex:1; line-height:52px; height:52px; font-size:28px; text-align:center; color:#3688FF;}

/* 新闻列表 */
.grace-news-list{margin:18px 0; padding:0 15px;}
.grace-news-list-img{width:200px; height:150px;}
.grace-news-list-content{width:500px; flex:1;}
.grace-news-list-title{line-height:50px; font-size:32px;}
.grace-news-list-desc{line-height:46px; font-size:26px; color:#777;}
.grace-news-list-imgs{width:230px; height:158px; margin:15px 0;}
.grace-news-list-big-imgs{width:720px; height:360px; margin:16px 0; border-radius:8px;}
.grace-news-list-info{color:#777; line-height:50px; font-size:22px;}

/* 评论列表 */
.grace-comments{margin:20px 0; flex-direction:row; flex-wrap:nowrap;}
.grace-comments-face{width:100px; height:100px; border-radius:100px; margin-right:20px;}
.grace-comments-body{width:700px; flex:1;}
.grace-comments-header{flex-direction:row; flex-wrap:nowrap; justify-content: space-between;}
.grace-comments-uname{color:#3688FF; font-size:30px;}
.grace-comments-zan{color:#666; font-size:26px;}
.grace-comments-content{line-height:50px; font-size:28px; color:#666666; margin-top:10px;}
.grace-comments-info{flex-direction:row; flex-wrap:nowrap; justify-content: space-between; margin-top:10px;}
.grace-comments-time{color:#999999; font-size:26px; line-height:50px;}
.grace-comments-replay{height:50px; line-height:50px; width:100px; border-radius:50px; text-align:center; background-color:#F4F5F6; font-size:26px;}
.grace-comments-imgs{width:190px; height:130px; border-radius:5px; margin:16px 0;}
.grace-comments-replay-content{background-color:#F5F6F8; font-size:28px; color:#666666; border-radius:3px; margin:10px 0; padding:15px; line-height:50px;}

/* 选项卡 */
.grace-tab-title{background-color:#FFFFFF; height:112px; flex-direction:row;}
.grace-tab-title-txt{width:200px; height:110px; font-size:32px; line-height:110px;  text-align:center; border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:#E8E8E8;}
.grace-tab-active{color:#3688FF; border-bottom-color:#3688FF; font-weight:700;}
.grace-tab-content{flex-direction:row; flex:1;}
.grace-tab-list{width:750px;}
.grace-tab-list-cell{width:750px;}

/* 加载和刷新 */
.grace-loading{width:750px; text-align:center; height:80px; color:#999999; justify-content:center; flex-direction:row; flex-wrap:nowrap;}
.grace-loading-txt{color:#888888; line-height:50px; margin-top:15px; font-size:28px; margin-left:10px;}
.grace-loading-indicator{color:#888888;  height:50px; width:50px; font-size:50px; margin-top:15px;}
.graces-refresh{width:750px; text-align:center; height:80px; color:#999999; justify-content:center; flex-direction:row; flex-wrap:nowrap;}

/* 折叠面板 */
.grace-accordion-title{background-color:#F9F9F9; flex-direction:row; flex-wrap:nowrap; margin-top:2px;}
.grace-accordion-txt{width:750px; flex:1; margin-left:20px; line-height:100px; font-size:32px;}
.grace-accordion-icon{width:60px; height:100px; text-align:center; line-height:100px; font-size:32px; color:#999;}
.grace-accordion-body{}

/* 普通表格 */
.grace-table{width:720px;}
.grace-theader{border-top-width:1px; border-top-style:solid; border-top-color:#F1F1F1; line-height:88px; text-align:center; font-size:32px;
	border-left-width:1px; border-left-style:solid; border-left-color:#F1F1F1; flex-direction:row; flex-wrap:nowrap;}
.grace-td{
	width:375px; flex:1; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#F1F1F1; line-height:88px; text-align:center; font-size:32px;
	border-right-width:1px; border-right-style:solid; border-right-color:#F1F1F1;
}
.grace-tbody{line-height:88px; text-align:center; font-size:30px; border-left-width:1px; border-left-style:solid; border-left-color:#F1F1F1; flex-direction:row; flex-wrap:nowrap;}

/* 数据表格 */
.grace-stable{width:750px;}
.grace-stable-title{width:750px; height:88px; flex-direction:row; flex-wrap:nowrap;}
.grace-stable-td{line-height:100px; width:200px; font-size:30px; text-align:center; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#F8F8F8;}
.grace-stable-l{width:200px; background-color:#FFFFFF; margin-right:8px;}
.grace-stable-r{width:750px; background-color:#FFFFFF; flex-direction:row;}
.grace-stable-body{width:750px; flex-direction:row; flex-wrap:nowrap;}
.grace-stable-body-cl{width:200px;}
.grace-stable-fixed{background-color:#FFFFFF;}

/* 吸顶容器 */
.grace-fixed-top{width:750px; position:fixed; left:0; top:0;}

/* 横向公告 */
.grace-box-banner{padding:26px 0; width:720px; border-radius:20px; flex-direction:row; flex-wrap:nowrap; background-color:#FFF;}
.grace-box-banner-items{width:600px; flex:1; border-right-width:1px; border-right-style:solid; border-right-color:#F1F2F3;}
.grace-box-banner-line1{font-size:40px; text-align:center; line-height:70px;}
.grace-box-banner-line2{font-size:26px; text-align:center; color:#666; line-height:40px;}
.grace-box-banner-unit{justify-content:center; height:70px; flex-direction:row; flex-wrap:nowrap;}
.grace-box-banner-unit-main{font-size:40px; line-height:70px;}
.grace-box-banner-unit-unit{font-size:28px; line-height:70px; margin-left:6px; color:#666666;}

/* 滚动操作 */
.grace-scroll-do{flex-direction:row; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E8E8E8; align-items:center;}
.grace-scroll-do-body{width:750px; flex-direction:row; align-items:center; flex-wrap:nowrap;}
.grace-scroll-do-img{width:90px; height:90px; margin:15px; border-radius:90px;}
.grace-scroll-do-content{width:750px; flex:1;}
.grace-scroll-do-title{font-size:32px; line-height:50px;}
.grace-scroll-do-txt{font-size:26px; line-height:50px; color:#666666;}
.grace-scroll-do-btns{width:120px; line-height:120px; text-align:center; font-size:32px; color:#FFFFFF;}

/* 返回顶部 */
.grace-totop{width:88px; position:fixed; bottom:80px; background-color:#F6F6F6; padding:10px 0; right:10px; border-radius:10px;}
.grace-totop-icon{text-align:center; line-height:40px; font-size:40px;}
.grace-totop-txt{text-align:center; font-size:20px; line-height:26px;}

/* 多功能菜单 - 纵向 */
.grace-popover-menu-item{width:100px; height:100px; line-height:100px; text-align:center; font-size:28px; color:#FFFFFF; border-radius:50%; margin:12px 0;}

/* 多功能菜单 - 横向 */
.grace-popover-menu-x{width:750px; left:0px; bottom:18px; position:fixed; z-index:9999; flex-wrap:nowrap; justify-content:center;}

/* 时间轴 */
.grace-timeline-rows{flex-wrap:nowrap; flex-direction:row;}
.grace-timeline-left{width:100px; height:100px; position:absolute; left:0; top:0;}
.grace-timeline-left-img{width:100px; height:100px; border-radius:100px;}
.grace-timeline-left-icon{width:100px; height:100px; line-height:100px; text-align:center; border-radius:100px;}
.grace-timeline-icons{width:100px; height:100px; line-height:100px; background-color:#FFFFFF; text-align:center; color:#3688FF; font-size:40px;}
.grace-timeline-body{width:668px; margin-left:50px; border-left-width:4px; border-left-style:solid; border-left-color:#E9E9E9; padding-bottom:30px; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end;}
.grace-timeline-content{width:580px;}
.grace-timeline-txt{padding:20px; line-height:50px; background-color:#F4F5F6; border-radius:5px; font-size:30px;}
.grace-timeline-time{padding:20px; font-size:22px; color:#888888; text-align:right;}
.grace-timeline-image{width:580px; height:300px; border-radius:10px;}

/* 徽章 */
.grace-badge{border-radius:38px; width:38px; height:38px; line-height:38px; text-align:center; font-size:26px; background-color:#D1D1D1;}
.grace-badge-absolute{position:absolute; right:0px; top:4px;}

/* 顶部搜索 */
.grace-search{width:750px; height:100px; flex-direction:row; flex-wrap:nowrap; background-color:#F1F2F3;}
.grace-search-in{width:700px; height:70px; flex:1; margin:15px 20px; border-radius:50px; background-color:#FFFFFF; flex-direction:row;}
.grace-search-icon{width:70px; height:70px;  text-align:center; line-height:70px; font-size:32px;}
.grace-search-input{height:70px; line-height:70px; flex:1;}
.grace-search-icons{width:80px; height:80px;  text-align:center; line-height:100px; font-size:46px;}
.grace-search-taps{padding:5px 20px; border-radius:10px; margin:15px; font-size:26px; line-height:50px; border-width:1px; border-style:solid; border-color:#D1D1D1; color:#666666;}

/* 城市选择 */
.grace-city-AZ{background-color:#FFF; line-height:100px; height:100px; font-size:32px; padding-left:30px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E9E9E9;}
.grace-city-list{line-height:100px; height:100px; font-size:30px; margin-left:30px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E9E9E9;}
.grace-city-AZ-right{width:60px; position:fixed; right:0; top:100px;}
.grace-city-AZs{line-height:40px; height:40px; font-size:28upx; text-align:center;}

/* 底部消息框按钮 */
.grace-btdialog-btns{width:750px; flex-direction:row; background-color:#FFFFFF; justify-content:space-between;}
.grace-btdialog-btn{width:200px; color:#A5A7B2; text-align:center; padding:0 20px; line-height:100px; height:100px; font-size:32px;}

/* 步骤 */
.grace-step{width:750px; flex-direction:row; flex-wrap:nowrap;}
.grace-step-items{width:120px; justify-content:center;}
.grace-step-items-icon{width:60px; height:60px; font-size:32px; line-height:60px; text-align:center; background-color:#F5F6F8; border-radius:60px;}
.grace-step-items-text{text-align:center; line-height:60px; font-size:22px; margin:0 22px;}
.grace-step-line{width:750px; margin-top:30px; height:2px; flex:1; background-color:#F5F6F8;}
.grace-step-icon-active{background-color:#3688FF; color:#FFFFFF;}
.grace-step-line-active{background-color:#3688FF;}

/* 表单布局 */
.grace-form-item{flex-direction:row; flex-wrap:nowrap; padding:10px 0; align-items:flex-start;}
.grace-form-title{width:200px; line-height:80px; font-size:32px; text-align:center; color:#666666;}
.grace-input{height:80px; font-size:32px; line-height:80px; width:750px; flex:1; padding:0 15px;}
.grace-form-other{width:750px; flex:1;}
.grace-form-icon{width:80px; line-height:80px; position:absolute; right:0; top:10px; font-size:32px; text-align:center;}
.grace-form-textarea{width:700px; height:200px; flex:1; margin:15px;}
.grace-form-funcs{width:80px; height:80px; text-align:center; color:#777777; font-size:40px; line-height:80px; position:absolute; right:0px; bottom:0;}

@font-face{font-family:"grace-iconfonts"; src:url('data:application/x-font-woff;charset=utf-8;base64,OLh6+EVGahJS0OU2yaKO26Kiu6Zv+fbC+9P6l/wm8ZwtrOU5zo2XwdDjj7ilb9szx6Pz8hzzU1DUMrbXMHC2NbU15WTlxOxUdK2llbX0DSSdFF0GClXLlRPIOJppGChZi5s6MnpKNvaqMLkwKoD8NsI9B7wqBANQgCNQhGDQgBAwhFKwhHGhBeDCDCOAI2YElRARjiAS2EBlMIQx4iGInC9nJQTHaVXQA5D56AB9FC6BE9O4gBKhATdCAWWEFskIYcQBnigDbEBX2IBwYQHyQhIThBohj9KScAF0gKAuQMEpALsJAHSEG+/kuiIgA4aBqIoCiQhzQx6qgEABMoBTShNDCC5oAC1AQWUAuIQRYwhzaCM7QFGOgo6EHXQAn6DDbQJNjjczuo4gsok+FuApClC9pt9nPwK3ehR05loNUk');}

/* 编辑器 */
.grace-editor{margin:15px;}
.grace-editor-title{width:720px; height:80px; font-size:36px; line-height:80px;}
.grace-editor-empty{color:#666666; font-size:30px; line-height:100px; text-align:center;}
.grace-editor-add-item{}
.grace-editor-menus{flex-wrap:nowrap; flex-direction:row; width:720px; height:88px; background-color:#F4F5F6; border-radius:10px;}
.grace-editor-icon{width:200px; height:88px; line-height:88px; text-align:center; font-size:32px; flex:1;}
.grace-editor-input-txt{width:720px; font-size:28px; line-height:40px; height:60px;}
.grace-editor-item{padding:10px 0;}
.grace-editor-center{width:500px; text-align:center; font-size:28px; line-height:60px; padding:10px 18px; border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#C1C1C1; height:60px;}
.grace-editor-quote{border-radius:3px; width:720px; padding:20px 20px; height:100px; background-color:#F8F8F8; line-height:50px; font-size:32px;}
.grace-editor-strong{font-weight:bold; width:720px; height:60px; font-size:30px; line-height:50px;}
.grace-editor-link{line-height:50px; padding:5px 0; color:#007AFF;}
.grace-editor-spline{padding:10px 0; text-align:center; color:#8788A3; font-size:30px;}
.grace-art-item{margin-top:30px;}
.grace-art-title{width:720px; font-size:36px; font-weight:bold; line-height:60px; margin-top:20px;}
.grace-art-spline{color:#999999;}
.grace-art-quote{width:720px; padding:20px; background-color:#F6F7F8; font-size:30px; line-height:60px;}

/* 文件选择及预览 */
.grace-file-list{flex-direction: row; flex-wrap:wrap;}
.grace-fl-add-btn{width:220px; height:220px; margin:10px; border-radius:10px; background-color:#F3F4F5;}
.grace-fl-add-text{font-size:28px; height:50upx; margin-top:10px; line-height:50px; text-align:center; color:#999999;}
.grace-fl-add-icon{font-size:100px; height:100px; line-height:100px; margin-top:30px; text-align:center;}
.grace-fl-items{width:220px; height:220px; margin:10px; background-color:#F6F7F8;}
.grace-fl-image{width:220px; height:220px; border-radius:10px;}
.grace-fl-remove{width:60px; height:60px; line-height:60upx; text-align:center; font-size:40px; position:absolute; right:5px; bottom:5; background-color:rgba(0,0,0, 0.5); color:#FFFFFF;}